import React, {lazy, Suspense} from 'react';
import {changeTdk, goSystem, setScrollTop} from "../../assets/js/utils";
import request from '../../assets/js/utils/request';
import hoc from './indexhoc';
import 'swiper/swiper-bundle.css';
import Css from '../../assets/css/bigbus/index.css';
import ScrollAnim from 'rc-scroll-anim';


//挂载 Mock
//import '../../mock/data.js'

const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
const ScrollParallax =  ScrollAnim.Parallax;

const GetBaidu = () => {
    let _hmt = [];
    _hmt.push(['_requirePlugin', 'UrlChangeTracker', {
        shouldTrackUrlChange: function (newPath, oldPath) {
            return newPath && oldPath;
        }}
    ]);
};



const Bigbus=hoc((props)=>{
    console.log(props)
    return(
        <div>
            {
                props.aBan!==undefined?
                    <div className={Css['bbs_banner']} id='indSuccess'>
                        <ScrollParallax
                            className={Css['bbs_ban_bg']}
                            location='indSuccess'
                            style={{backgroundImage:'url('+props.aBan.img+')'}}
                            animation={{y:0, playScale: [0.9, 1.5]}}
                        ></ScrollParallax>
                        <div className={Css['bbsBanCen']}>
                            <p>
                                <strong>{props.aBan.title}</strong>
                                {props.aBan.list}
                            </p>
                            <div className={Css['bbsBtn']} id='bigBan' onClick={props.goPages.bind(this,props.aBan.url)}>{props.aBan.btn}</div>
                        </div>
                    </div>
                    :''
            }
            <div className={Css['bbsCostCen']}>
                {
                    props.aCos!==undefined?
                        props.aCos.map((item,index)=>{
                            return(
                                <React.Fragment key={index}>
                                    <div className={Css['bbsCostCenTitle']}><p>{item.zn}</p><span>{item.en}</span></div>
                                    <div className={Css['bbsCostCenList']} dangerouslySetInnerHTML={{__html:item.list}}></div>
                                </React.Fragment>
                            )
                        })
                        :''
                }
            </div>
            <div className={Css['bbsPlat']}>
                {
                    props.aPla!==undefined?
                        <ScrollParallax
                            className={Css['bbsPlat_bg']}
                            style={{backgroundImage:'url('+props.aPla.bg+')'}}
                            animation={{y:0, playScale: [0, 1.5]}}
                        ></ScrollParallax>
                        :''
                }

                <div className={Css['bbsPlatCen']}>
                    <div className={Css['bbsTitle']+' '+Css['bbsTitle_w']}>
                        <p>高度聚合多重优势的员工关爱共生平台</p><span>具备高度融合性和延展性的PaaS+SaaS</span>
                    </div>
                    <ul>
                        {
                            props.aPla!==undefined && props.aPla.aPlaList!==undefined?
                                props.aPla.aPlaList.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            <p>{item.title}</p>
                                            <span>{item.list}</span>
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
            </div>
            <div className={Css['bbsSystem']}>
                <div className={Css['bbsSystemCen']}>
                    <div className={Css['bbsTitle']}>
                        <p>搭建员工福利全景画像，构建多元灵活的福利体系</p>
                    </div>
                    <div className={Css['bbsSystemCenUl']}>
                        <ul>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>年节福利</div>
                                <div className={Css['bbsSystemCenUlList']}>
                                    <span>新年<br />
                                      中秋节<br />
                                      端午节</span>
                                                            <span>妇女节<br />
                                        儿童节<br />
                                        生日福利</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>培训发展</div>
                                <div className={Css['bbsSystemCenUlList']}>
                                    <span>教育培训</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>津贴补助</div>
                                <div className={Css['bbsSystemCenUlList']}>
            <span>午餐<br />
              交通<br />
              通讯</span>
                                    <span>高温<br />
                劳保</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>员工激励</div>
                                <div className={Css['bbsSystemCenUlList']}>
            <span>激励点赞<br />
              即时认可</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>健康管理</div>
                                <div className={Css['bbsSystemCenUlList']}>
                                    <span>EAP</span>
                                    <span>体检</span>
                                    <span>健康管理商城</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>特权服务</div>
                                <div className={Css['bbsSystemCenUlList']}>
            <span>会员活动<br />
              品牌内购</span>
                                    <span>超值体验<br />
                拼团爆款</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>风险保障</div>
                                <div className={Css['bbsSystemCenUlList']}>
            <span>医疗保险<br />
              重疾保险</span>
                                </div>
                            </li>
                            <li>
                                <div className={Css['bbsSystemCenUlTitle']}>企业文化</div>
                                <div className={Css['bbsSystemCenUlList']}>
            <span>团队建设<br />
              企业活动</span>
                                    <span>员工沟通</span>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div className={Css['bbsSystemList']}>
                        <p> 360°员工福利场景<br />
                            福利统筹管理、员工职场关怀、企业文化建设……</p>
                        <p>整合优质资源，200+成熟应用，覆盖员工职场/生活全场景，满足员工个性化需求</p>
                        <p>赋能员工福利选择权与知情权，提高员工福利感知度，提升福利有效性</p>
                        <p>帮助企业在现有福利预算基础上全方位升级员工福利体验，激发组织活力</p>

                    </div>
                </div>
            </div>
            <div className={Css['bbsDemand']}>
                {
                    props.aDem!==undefined?
                        <ScrollParallax
                            className={Css['bbsDemand_bg']}
                            style={{backgroundImage:'url('+props.aDem.bg+')'}}
                            animation={{y:0, playScale: [0, 1.5]}}
                        ></ScrollParallax>
                        :''
                }

                <div className={Css['bbsDemandCen']}>
                    <div className={Css['bbsTitle']}>
                        <p>全方位满足大企业多维个性需求</p>
                    </div>
                    <ul>
                        {
                            props.aDem!==undefined && props.aDem.aDemList!==undefined?
                                props.aDem.aDemList.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            <p><i className={item.icn}></i></p>
                                            <span dangerouslySetInnerHTML={{__html:item.list}}></span>
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
            </div>
            <div className={Css['bbsStpetCen']}>
                <div className={Css['bbsTitle']}>
                    <p>从调研到运营，10步落地专属方案</p>
                </div>
                <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={require('../../assets/images/bigbus/bbs4.jpg')} alt={'asd'} />
            </div>
            <div className={Css['guContent']}>
                {
                    props.asece!==undefined?
                        <ScrollParallax
                            className={Css['guContent_bg']}
                            style={{backgroundImage:'url('+props.asece.bg+')'}}
                            animation={{y:0, playScale: [0, 1]}}
                        ></ScrollParallax>
                        :''
                }

                <div className={Css['guContentCen']}>
                    <div className={Css['guConTitle']}>{props.asece!==undefined?props.asece.title:''}<p>{props.asece!==undefined?props.asece.phon:''}</p></div>
                    {
                        props.asece!==undefined && props.asece.btn!==undefined?
                            props.asece.btn.map((item,index)=>{
                                return(
                                    <div className={Css['guConBtn']} id={item.id} key={index} onClick={props.goPages.bind(this,item.url)}>{item.title}</div>

                                )
                            })
                            :''
                    }
                </div>
            </div>
        </div>
    )
})
class bigbus extends React.Component{
    constructor(props){
        super(props);
        this.state={
            title:'员工关爱共生平台-中智关爱通',
            description:'企业福利平台,弹性福利,员工关爱,员工福利解决方案',
            keywords:'关爱通为大企业提供全场景、一站式弹性福利平台，满足企业福利全面合规与降本增效的需求，提供个性化定制服务，涵盖节日福利、员工健康管理、风险保障、津贴补助、员工激励、企业文化、员工关爱等各个方面。',
            aBan:{},
            aCos:[],
            aPla:{},
            aDem:{},
            asece:{},


        }
    }
    componentDidMount(){
        this.goSystem()
        setTimeout(()=>{
            this.getABanData();
            this.getACosData();
            this.getAPlaData();
            this.getADemData();
            this.getAaseceData();
            GetBaidu()
        },200)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }

    //获取联系我们
    getAaseceData(){
        let temasece={},sUrl='group.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temasece=res.botContent;
                this.setState({asece:temasece})
            }
        })
    }
    //获取dem数据
    getADemData(){
        let temADem=[],sUrl='bigbus.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temADem=res.aDem;
            }
            this.setState({aDem:temADem})
        })
    }
    //获取pla数据
    getAPlaData(){
        let temAPla={},sUrl='bigbus.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temAPla=res.aPla;
            }
            this.setState({aPla:temAPla})
        })
    }
    //获取cos数据
    getACosData(){
        let temACos=[],sUrl='bigbus.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temACos=res.aCos;
            }
            this.setState({aCos:temACos})
        })
    }
    //获取ban数据
    getABanData(){
        let temABan={},sUrl="bigbus.json";
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temABan=res.aBan
            }
            this.setState({aBan:temABan})
        })
    }
    //判断跳转平台
    goSystem(){
        goSystem(this.props,'bigbus')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }

    render(){
        let newProps={
            aBan:this.state.aBan,
            aCos:this.state.aCos,
            aPla:this.state.aPla,
            aDem:this.state.aDem,
            asece:this.state.asece
        }
        return(
            <div>

                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <Bigbus {...this.props} {...newProps}></Bigbus>
                <Suspense　fallback={<React.Fragment/>}>
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>
            </div>
        )
    }

}
export default bigbus;